<template>
    <div>
        <div>
            <!-- 搜索筛选 -->
            <el-card class="box-card">
                <el-form :inline="true" :model="formInline">
                    <el-form-item style="margin-bottom: 0px">
                        <el-input size="small" v-model="formInline.groupName" placeholder="群成员名称"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0px">
                        <el-date-picker size="small"
                            v-model="formInline.createTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0px">
                        <el-button size="small" type="primary" @click="searchDataHandle(1,10)">查询</el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <!--列表-->
            <el-card class="box-card">
                <div class="interspaceH"></div>
                <el-table size="small" :data="listData" style="width: 100%;">
                    <el-table-column align="center" type="selection" width="60">
                    </el-table-column>
                    <el-table-column sortable prop="chatName" label="成员名称" width="200">
                    </el-table-column>
                    <el-table-column sortable prop="memberType" :formatter="formatter" label="成员类型" width="150">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.memberType == '2'" size="mini" type="text">客户</el-tag>
                            <el-tag v-if="scope.row.memberType == '1'" size="mini" type="text">员工</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column sortable prop="joinTime" :formatter="formatter" label="入群日期" width="200">
                    </el-table-column>
                    <el-table-column sortable prop="joinType" :formatter="formatter" label="入群方式" width="120">
                    </el-table-column>
                    <el-table-column sortable prop="invitor" label="邀请员工" width="120">
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="150">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.memberType == '2'" size="mini" @click="detailHandle(scope.row)"
                                       type="text">客户详情
                            </el-button>
                            <el-button v-if="scope.row.memberType == '1'" size="mini" @click="detailHandle(scope.row)"
                                       type="text">员工详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="display: flex; justify-content: flex-end;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="1">
                    </el-pagination>
                </div>
            </el-card>
            <el-button size="small" type="primary" @click="back()">返回</el-button>
        </div>
        <el-dialog :visible.sync="detailVisible" width="30%" >
            <el-form v-model="updateForm" label-width="100px">
                <el-form-item label="人员名称:">
                    <el-input type="text" v-model="updateForm.chatName" autocomplete="off" disabled style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="成员类型:">
                    <el-input type="text" v-model="updateForm.memberType" autocomplete="off" disabled style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="入群时间:">
                    <el-input type="text" v-model="updateForm.joinTime" autocomplete="off" disabled style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="入群方式:">
                    <el-input type="text" v-model="updateForm.joinType" disabled style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="入群邀请人:">
                    <el-input type="text" v-model="updateForm.invitor" disabled style="width: 30%"></el-input>
                </el-form-item>
                <el-form-item label="人员状态：">
                    <el-input type="text" v-model="updateForm.status" disabled style="width: 30%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    const chatType = [
        {
            value: '1',
            label: '员工'
        },
        {
            value: '2',
            label: '客户'
        }
    ]
    const joinType = [{
        value: "1",
        label: "邀请入群"
    }, {
        value: "2",
        label: "链接入群"
    }, {
        value: "3",
        label: "扫码入群"
    }
    ]
    import ClientDetail from '@/views/customer/client/client_detail'

    export default {
        props: {
            rowId: {
                type: String,
                default: ''
            }
        },
        components: {
            ClientDetail
        },
        data() {
            return {
                currentPage4: 1,
                listData: [],
                loading: false, // true显示加载
                currentPanel: 'list',
                detailVisible: false,
                updateForm:{},
                // 筛选
                formInline: {},
                options: [{
                    value: '',
                    label: ''
                }],
                //下拉列表种类
                dictionary: {
                    chatType: chatType,
                    joinType: joinType
                },
                //字段转换
                fieldType: {
                    chatType: "array",
                    joinTime: "datetime",
                    joinType: "array"
                },
            }
        },
        mounted() {
            this.queryDataHandle(1, 10)
        },

        methods: {
            queryDataHandle(pageNum, rows) {
                let that = this
                let payData = {
                    clientGroupId: this.rowId,
                    status: '1',
                    pageSize:rows,
                    pageNum : pageNum
                }
                this.$request("/api/custGroup/selectDetailedList/1_0", payData, "POST").then((data) => {
                    that.listData = data.rows
                    this.currentPage = data.pageNum
                    this.pageSize = data.pageSize
                    this.total = data.total
                })
            },
            back() {
                this.$emit("currentHandler", "list")
            },
            // 查询
            search() {
                this.getdata(this.formInline)
            },
            // 重置
            reset() {
                this.formInline.createTime = '';
                this.formInline.groupName = '';
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.formInline)
            },
            // 关闭事件弹出框
            eventClose() {
                this.eventFormVisible = false
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            formatter(row, column) {
                let field = column.property;
                let value = row[field];
                return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
            },
            detailHandle(row) {
                let that = this
                // this.$request("/api/member/getAllMember/1_0", {groupMemberId:row.chatId}, "POST").then((data) => {
                //     that.updateForm = data.rows
                // })
                this.updateForm = {...row}
                if(that.updateForm.memberType == 1){
                    that.updateForm.memberType = '员工'
                }else{
                    that.updateForm.memberType = '客户'
                }
                if(that.updateForm.joinType == 1){
                    that.updateForm.joinType = '邀请入群'
                }else if(row.joinType == 2){
                    that.updateForm.joinType = '链接邀请入群'
                }else{
                    that.updateForm.joinType = '扫码入群'
                }
                that.updateForm.status = '群成员'
                this.detailVisible = true;
            },
            searchDataHandle(page = 1, rows=10) {
                let that = this
                let groupData = {}
                if(this.formInline.createTime == null && this.formInline.groupName == null){
                    that.$message.error("未选择查询条件");
                    return
                }else if(this.formInline.createTime != null && this.formInline.createTime != ''){
                    groupData = {
                        clientGroupId: that.rowId,
                        chatName: that.formInline.groupName,
                        startTime: that.formInline.createTime[0],
                        endTime: that.formInline.createTime[1],
                        status: '1',
                        pageSize:rows,
                        pageNum : page
                    }
                }else{
                    groupData = {
                        clientGroupId: that.rowId,
                        chatName: that.formInline.groupName,
                        status: '1',
                        pageSize:rows,
                        pageNum : page
                    }
                }
                this.$request("/api/member/getMemberList/1_0", groupData, "POST").then((data) => {
                    that.listData = data.rows
                    that.pageparm = {
                        currentPage: 1,
                        pageSize: 10,
                        total: data.total
                    }
                })
            },
        }
    }
</script>

<style scoped>

    .float-right {
        float: right;
    }
</style>
